Scoped Model এবং Redux দিয়ে State Management

Flutter এ Scoped Model এবং Redux হলো দুইটি জনপ্রিয় State Management প্যাটার্ন, যা বিশেষত মাঝারি থেকে বড় আকারের অ্যাপ্লিকেশন পরিচালনা করতে সহায়তা করে। এগুলোর মাধ্যমে অ্যাপ্লিকেশনের ডেটা বা স্টেট সঠিকভাবে শেয়ার, আপডেট, এবং মেইনটেইন করা যায়। নিচে Scoped Model এবং Redux এর মাধ্যমে State Management এর বিশদ ব্যাখ্যা এবং উদাহরণ দেয়া হলো।

Scoped Model:

Scoped Model হলো Flutter এর একটি পুরনো State Management প্যাকেজ, যা InheritedWidget এর উপরে তৈরি হয়েছে। এটি Widget ট্রির মধ্যে ডেটা শেয়ার এবং স্টেট আপডেট করতে সহজ করে তোলে।

Scoped Model এর বৈশিষ্ট্য:

• Scoped Model ব্যবহার করে আপনি একটি গ্লোবাল স্টেট তৈরি করতে পারেন, যা অ্যাপের বিভিন্ন অংশে সহজেই অ্যাক্সেস করা যায়।
• এটি মূলত InheritedWidget এর উপরে তৈরি হওয়ায় Widget ট্রি থেকে ডেটা খুঁজে পাওয়া সহজ।

Scoped Model সেটআপ করা:

প্রথমে scoped_model প্যাকেজ ইনস্টল করুন (pubspec.yaml এ যোগ করুন):

dependencies:
 scoped_model: ^1.0.1

Scoped Model এর উদাহরণ:

import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';

void main() {
  runApp(MyApp());
}

class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel<CounterModel>(
      model: CounterModel(),
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scoped Model Example')),
      body: Center(
        child: ScopedModelDescendant<CounterModel>(
          builder: (context, child, model) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Counter: ${model.counter}'),
                SizedBox(height: 16.0),
                ElevatedButton(
                  onPressed: model.increment,
                  child: Text('Increment'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

• CounterModel: একটি Model ক্লাস যা স্টেট ধারণ করে এবং পরিবর্তন ঘটালে notifyListeners কল করে।
• ScopedModel: এটি গ্লোবাল মডেল হিসাবে কাজ করে, যা অ্যাপের অন্যান্য অংশে অ্যাক্সেস করা যায়।
• ScopedModelDescendant: এটি মডেল থেকে ডেটা গ্রহণ করে এবং যখন মডেল পরিবর্তন হয়, তখন UI আপডেট করে।

Redux:

Redux হলো একটি জনপ্রিয় State Management প্যাটার্ন, যা বিশেষ করে বড় আকারের এবং জটিল অ্যাপ্লিকেশনের জন্য ব্যবহৃত হয়। এটি অ্যাপের স্টেটকে একটি সেন্ট্রাল স্টোরে মেইনটেইন করে এবং স্টেট আপডেটের জন্য অ্যাকশন এবং রিডিউসার প্যাটার্ন ফলো করে।

Redux এর বৈশিষ্ট্য:

• Redux একটি সেন্ট্রাল স্টোরে স্টেট মেইনটেইন করে, যা অ্যাপের যেকোনো জায়গা থেকে অ্যাক্সেস করা যায়।
• অ্যাকশন এবং রিডিউসার প্যাটার্ন ব্যবহার করে, Redux স্টেট পরিবর্তন করে, যা অ্যাপের স্টেট আপডেট প্রক্রিয়াকে পূর্বানুমেয় এবং নির্ভরযোগ্য করে।

Redux সেটআপ করা:

প্রথমে flutter_redux প্যাকেজ ইনস্টল করুন (pubspec.yaml এ যোগ করুন):

dependencies:
  flutter_redux: ^0.8.2
  redux: ^4.0.0

Redux এর উদাহরণ:

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

void main() {
  final store = Store<int>(counterReducer, initialState: 0);
  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final Store<int> store;

  MyApp({required this.store});

  @override
  Widget build(BuildContext context) {
    return StoreProvider<int>(
      store: store,
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

// Action
enum Actions { Increment }

// Reducer
int counterReducer(int state, dynamic action) {
  if (action == Actions.Increment) {
    return state + 1;
  }
  return state;
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Redux Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            StoreConnector<int, String>(
              converter: (store) => store.state.toString(),
              builder: (context, count) {
                return Text('Counter: $count');
              },
            ),
            SizedBox(height: 16.0),
            StoreConnector<int, VoidCallback>(
              converter: (store) {
                return () => store.dispatch(Actions.Increment);
              },
              builder: (context, callback) {
                return ElevatedButton(
                  onPressed: callback,
                  child: Text('Increment'),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

• Store: এটি Redux স্টেট মেইনটেইন করে। এখানে counterReducer এবং স্টেটের ইনিশিয়াল ভ্যালু পাস করা হয়েছে।
• Action: একটি অ্যাকশন ডিফাইন করা হয়েছে Actions.Increment, যা স্টেট পরিবর্তনের জন্য ব্যবহৃত হয়।
• Reducer: রিডিউসার একটি ফাংশন, যা বর্তমান স্টেট এবং অ্যাকশন গ্রহণ করে এবং নতুন স্টেট রিটার্ন করে।
• StoreProvider: এটি Store কে অ্যাপের প্রতিটি অংশে অ্যাক্সেসযোগ্য করে তোলে।
• StoreConnector: এটি Store থেকে ডেটা গ্রহণ করে এবং যখন স্টেট পরিবর্তিত হয়, তখন UI আপডেট করে।

Scoped Model এবং Redux এর তুলনা:

কখন কোনটি ব্যবহার করবেন:

• Scoped Model: ছোট থেকে মাঝারি অ্যাপ্লিকেশনের জন্য যেখানে অ্যাপের কমপ্লেক্সিটি কম এবং স্টেট ম্যানেজমেন্ট সীমিত।
• Redux: বড় এবং জটিল অ্যাপ্লিকেশনের জন্য যেখানে স্টেট গ্লোবালি ম্যানেজ করা প্রয়োজন এবং প্রতিটি স্টেট পরিবর্তন ট্র্যাক করতে হয়।

Flutter এ Scoped Model এবং Redux ব্যবহার করে আপনি অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট সিস্টেমকে শক্তিশালী করতে পারেন এবং ডাইনামিক UI এর জন্য প্রয়োজনীয় ডেটা ম্যানেজমেন্ট করতে পারেন।